你知道 pages 的 vue 元件多了什麼功能嗎？

經過昨天的介紹，我們都知道 pages 是拿來放各頁面的 vue 元件，也知道 router 會依照 pages 目錄結構來生成配置，除了這些之外，到底跟平常的 vue 元件有什麼不一樣？
今天就讓我們一起來研究，pages 元件增加的那些方法／屬性們吧！

asyncData 方法

我們平常在 vue 元件中使用的是 data 屬性，看到 data 絕對就是放資料的地方，沒有錯啦！
那 syncData 跟我們的 data 有什麼關係呢？
** asyncData 方法使得你能夠在渲染組件之前異步獲取數據。**

data() {
    return { text: '被覆蓋的資料' } 
},
asyncData() {
    return { text: '新資料' } 
}

以上面的例子來說，雖然一開始我們有 data 資料，可資料會在渲染出來之前，就被 asyncData 取回來的資料覆蓋囉！
** asyncData 方法會在元件每次加載之前被調用**，這樣有什麼好處呢？我們用兩種範例示範差別

1. 打開一個空網頁(瀏覽器滿頭問號不知道這網頁做啥的)→呼叫 API 取資料到 data → data 更新到畫面
2. asyncData 呼叫 API 取得資料到 data 當預設值→渲染網頁(瀏覽器看的到預設值的資料)

這樣大家應該感受的到差別了(?)
簡單來說就是 空網頁 / 有預設值資料的網頁 的差別
若是要深入了解，可以搜尋關鍵字 ** SPA / SSR **
小妹能力有限，菜比八只能先簡單粗略說明，在此抱歉阿！

fetch 方法

fetch 方法跟樓上的 asyncData 方法有87%相像，一樣是在網頁渲染之前調用，差別在 fetch 方法填充的是狀態樹（store）數據，若有使用 Vuex 就會用到囉!

head 方法

這裡說的 head 就是 HTML 的那個 head 沒有錯啦！
在我們 Nuxt.js 裡面，除了擁有全域 head 設定之外，更可以客製化每一個頁面專屬的 head 設定喔！

• 全域 head 設定
  首先請打開 nuxt.config.js 檔案
  將我們需要的 meta 設定一一填入即可啦！有沒有簡單？

module.exports = {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

那你可能會想問，如果要使用外部的 CSS 或 JS 怎麼辦呢？
別擔心，一樣簡單，全域使用就通通丟到 nuxt.config.js 沒有錯啦！
像是常用的 google 字體或是 jQuery 如下範例使用即可。

module.exports = {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto'
      }
    ]
  }
}

• 個別 head 設定
  資料結構都跟樓上全域的一樣，只是放置的位置更動而已，把資料放到元件檔案內即可唷！

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello World!'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'My custom description'
          }
        ]
      }
    }
  }
</script>

像這樣就可以客製化每一個頁面的 head 了，是不是很容易呢？

結語

恭喜各位，今天我們一起研究了 pages 元件中的幾個方法，都非常的實用。
明天我們接著把剩下的屬性跟方法研究完畢，讓我們在使用此工具可以更加便利唷！